import Vue from 'vue';
import { router } from './router/index';
import { appRouter } from './router/router';
import store from './store';
import App from './app.vue';
import ViewUI from 'view-design';
import 'view-design/dist/styles/iview.css';
import util from './libs/util';
import VImg from 'v-img';
import VueQuillEditor from 'vue-quill-editor'
import axiosConfig from "./axios"
import VCharts from 'v-charts'
import VOrgTree from 'v-org-tree'
import 'v-org-tree/dist/v-org-tree.css'
import * as vClickOutside from 'v-click-outside-x';
import websocket from './setkey.js'
Vue.prototype.$websocket = websocket
Vue.use(vClickOutside);
Vue.use(ViewUI);
Vue.use(VImg)
Vue.use(VueQuillEditor);
Vue.use(VCharts)
Vue.use(VOrgTree)

Vue.filter('datedisposal', function (date) {
    if (date == 0) {
        return "暂无数据";
    } else {
        return util.utcToTime(date);
    }
})
import notification from 'notification-koro1'; // 引入npm包
//获取水印设置
function loadWaterMark() {
    var isWaterMark = JSON.parse(sessionStorage.getItem("userdata"))
    if (isWaterMark!=null) {
      var text = `${JSON.parse(sessionStorage.getItem("userdata")).name}<br>${JSON.parse(sessionStorage.getItem("userdata")).userName}`;
      var fontSize = 16;
      var fontcolor = "#efefef";
      var opacity = 0.7;
      var width = 180;
      var height = 150;
      GenWaterMark(
        text.replaceAll("<br>", "\n"),
        fontSize,
        fontcolor,
        opacity,
        width,
        height
      );
    }
  }
  function GenWaterMark(
    text,
    fontsize,
    fontcolor,
    opacity,
    width,
    height,
    target
  ) {
    // if (!target) {
    target = document.getElementsByTagName("body")[0];
    // }
    // document.getElementsById("#waterMarkCanvas").remove();
    // $("#waterMarkCanvas").remove();
  
    var dataUrl = GenWaterMarkImg(text, fontsize, fontcolor, width, height);
    var shuiyinDiv = document.createElement("div");
    var style = shuiyinDiv.style;
    style.position = "absolute";
    style.left = 0;
    style.top = 0;
    style.width = "100%";
    style.height = "100%";
    style.opacity = opacity;
    style.background = "url(" + dataUrl + ")";
    style.zIndex = 888;
    style.pointerEvents = "none";
    shuiyinDiv.id = "waterMarkCanvas";
    target.append(shuiyinDiv);
  }
  
  function GenWaterMarkImg(text, fontsize, fontcolor, width, height) {
    var rotate = 12;
    var canvas = document.createElement("canvas");
    canvas.height = height;
    canvas.width = width;
    var chr = text.split("\n");
    var maxLength = 0;
    for (var a = 0; a < chr.length; a++) {
      if (chr[a].length > maxLength) {
        maxLength = chr[a].length;
      }
    }
    var context = canvas.getContext("2d");
    context.clearRect(0, 0, canvas.width * 2, canvas.height);
    context.fillStyle = fontcolor;
    context.font = fontsize + "px Arial";
    context.textAlign = "center";
    context.textBaseline = "middle";
    var ox = canvas.width / 2;
    var oy = canvas.height / 5;
    var r = [rotate, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0];
    for (var a = 0; a < chr.length; a++) {
      context.translate(ox, oy); // 将画布的原点移动到正中央
      context.rotate(r[a]); // 弧度 = (Math.PI/180)*角度
      context.fillText(chr[a], 5, fontsize * (a + 1));
      context.translate(-ox, -oy); // 将画布的原点还原
    }
    var canvasWidth = canvas.width / 99;
    canvasWidth = context.measureText(text).width;
    return canvas.toDataURL("image/png");
  }
  Vue.prototype.$loadWaterMark=loadWaterMark
  loadWaterMark()
export const vm = new Vue({
    el: '#app',
    router: router,
    store: store,
    render: h => h(App),
    data: {
        currentPageName: ''
    },
    mounted() {

        this.currentPageName = this.$route.name;
        // 显示打开的页面的列表
        this.$store.commit('app/setOpenedList');
        this.$store.commit('app/initCachepage');
        // 权限菜单过滤相关
        this.$store.commit('app/updateMenulist');
    },
    created() {
        // console.log(util.baseApi.ajaxUrl)

        // let title = '您有一个消息未处理', options = {
        //     dir: "auto", // 文字方向
        //     body: "通知：OBKoro1评论了你的朋友圈", // 通知主体
        //     requireInteraction: true, // 不自动关闭通知
        //     // 通知图标 
        //     icon: "https://upload-images.jianshu.io/upload_images/5245297-818e624b75271127.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240"
        // };
        // const notificationClass = new notification(title, options);
        // if (notificationClass.support) {
        //     console.log('显示通知逻辑，以下所有步骤都要在这里调用')
        //     // 显示通知逻辑，以下所有步骤都要在这里调用
        // } else {
        //     console.log('浏览器不支持')
        //     // 浏览器不支持
        // }
        // const eventObj = {
        //     // 点击通知回调
        //     onclick: e => {
        //         console.log("点击通知打开百度", e);
        //         window.open("https://www.baidu.com/", "_blank");
        //     },
        //     // 通知显示回调
        //     onshow: e => {
        //         console.log("显示", e);
        //     },
        //     // 通知遇到错误回调
        //     onerror: e => {
        //         console.log("通知报错", e);
        //     },
        //     // 通知关闭回调
        //     onclose: e => {
        //         console.log("关闭通知", e);
        //     }
        // };
        // notificationClass.notificationEvent(eventObj);

        // const userSelectFn = msg => {
        //     if (msg === 'already granted' || msg === 'granted') {
        //         // 随时可以调用通知
        //         return notificationClass.userAgreed();
        //     } else if (msg === 'close') {
        //         // 请求权限通知被关闭
        //         return notificationClass.initNotification(userSelectFn); // 再次调用
        //     } else if (msg === 'denied' || msg === 'already denied') {
        //         // 请求权限当前被拒绝 || 曾经被拒绝
        //         if (msg === "denied") {
        //             console.log("您刚刚拒绝显示通知 请在设置中更改设置");
        //         } else {
        //             console.log("您曾级拒绝显示通知 请在设置中更改设置");
        //         }
        //     }
        // };
        // notificationClass.initNotification(userSelectFn); // 请求授权
        // notificationClass.userAgreed();
        let tagsList = [];
        appRouter.map((item) => {
            if (item.children.length <= 1) {
                tagsList.push(item.children[0]);
            } else {
                tagsList.push(...item.children);
            }
        });
        this.$store.commit('app/setTagsList', tagsList);
    },
    methods: {
    }
});
